
<!-- 设备维修页面 -->
<template>
  <el-dialog v-model="weihuVisible"
             title="新增设备维护信息"
             width="500"
             draggable
             overflow>
    <div class="maintenance-form">
      <el-form :model="formData"
               :rules="rules"
               ref="maintenanceForm">
        <!-- 基础信息 -->
        <el-divider content-position="left">基础信息</el-divider>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="设备编号"
                          prop="deviceId">
              <!-- <el-select v-model="formData.deviceId"
                       placeholder="请选择设备"
                       filterable>
              <el-option v-for="item in deviceList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id" />
            </el-select> -->
              <el-input v-model="formData.deviceId"
                        disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称"
                          prop="deviceName">
              <el-input v-model="formData.deviceName"
                        disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="维护类型"
                          prop="maintenanceType">
              <el-select v-model="formData.maintenanceType">
                <el-option v-for="type in maintenanceTypes"
                           :key="type.value"
                           :label="type.label"
                           :value="type.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维护时间"
                          prop="maintenanceTime">
              <el-date-picker v-model="formData.maintenanceTime"
                              type="datetime"
                              placeholder="选择日期时间" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 维护过程 -->
        <el-divider content-position="left">维护过程</el-divider>
        <el-form-item label="维护状态"
                      prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio label="进行中">进行中</el-radio>
            <el-radio label="已完成">已完成</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="维护描述"
                      prop="description">
          <el-input type="textarea"
                    :rows="3"
                    v-model="formData.description"
                    placeholder="请输入维护内容" />
        </el-form-item>

        <el-form-item label="故障现象"
                      prop="faultDescription"
                      v-if="showFaultFields">
          <el-input type="textarea"
                    :rows="2"
                    v-model="formData.faultDescription"
                    placeholder="描述故障现象" />
        </el-form-item>

        <!-- <el-form-item label="维护措施"
                    prop="action">
        <el-input type="textarea"
                  :rows="3"
                  v-model="formData.action"
                  placeholder="详细描述维护措施" />
      </el-form-item> -->

        <!-- 文件上传 -->
        <!-- <el-form-item label="维护照片">
        <el-upload
          action="your-upload-url"
          list-type="picture-card"
          :on-success="handleUploadSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item> -->

        <!-- 提交按钮 -->
        <el-form-item>
          <div style="width: 100%;text-align: center;">
            <el-button type="primary"
                       @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
  <!-- 列表展示 -->
  <div class="maintenance-content">
    <!-- 搜索查询模块 -->
    <div class="maintenance-content-search">
      <el-form :model="form"
               label-width="auto">
        <el-row :gutter="50"
                class="mb-20">
          <el-col :span="6">
            <el-form-item label="名称">
              <el-input v-model="searchForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="维护类型">
              <el-input v-model="searchForm.datasetName"
                        placeholder="数据集名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="维护状态">
              <el-input v-model="searchForm.datasetName"
                        placeholder="数据集名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary"
                       @click="searchData">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-divider border-style="dashed" />

    <div class="maintenance-content-handle">
      <el-button type="primary"
                 @click="openDialog">新增</el-button>
      <el-button @click="resetSearch">导出</el-button>
    </div>
    <el-divider border-style="dashed" />

    <el-table :data="deviceMaintenanceList"
              border
              stripe
              style="width: 100%;height:500px">
      <el-table-column fixed
                       prop="deviceId"
                       label="设备编号"></el-table-column>
      <el-table-column prop="deviceName"
                       label="设备名称"></el-table-column>
      <el-table-column prop="maintenanceType"
                       label="维护类型">
        <template #default="scope">
          <el-tag v-if="scope.row.maintenanceType === '1'"
                  type="success">维护</el-tag>
          <el-tag v-if="scope.row.maintenanceType === '2'"
                  type="danger">维修</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="maintenanceTime"
                       label="维护时间"></el-table-column>
      <el-table-column prop="maintenanceStatus"
                       label="维护状态"></el-table-column>
      <el-table-column prop="maintenanceDescription"
                       label="维护描述"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini"
                     type="primary"
                     @click="editItem(scope.row)">编辑</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="deleteItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-divider border-style="dashed" />

    <!-- 分页 -->
    <el-pagination :total="totalCount"
                   :page-size="pageSize"
                   :current-page="currentPage"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange">
    </el-pagination>

  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue'

// 模拟设备维护信息列表
const deviceMaintenanceList = ref([
  {
    deviceId: '1',
    deviceName: '摄像机',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '2',
    deviceName: '路灯',
    maintenanceType: '2',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '3',
    deviceName: '镭射一体机',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '4',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '5',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '6',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '7',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '8',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '9',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '10',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '11',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '12',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '13',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '14',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '15',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '16',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '17',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '18',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '19',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '20',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '21',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '22',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '23',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '24',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '25',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '26',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '27',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '28',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '29',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
  {
    deviceId: '30',
    deviceName: '设备',
    maintenanceType: '1',
    maintenanceTime: '2025-02-10',
    maintenanceStatus: '进行中',
    maintenanceDescription: '定期检查',
  },
])

// 维护的
const weihuVisible = ref(false)

// 表单数据
const formData = ref({
  deviceId: '',
  deviceName: '',
  maintenanceType: '',
  maintenanceTime: '',
  status: '进行中',
  description: '',
  faultDescription: '',
  action: '',
  photos: [],
})

// 搜索表单数据
const searchForm = reactive({
  name: '',
  datasetId: '',
  datasetName: '',
})
// 分页相关数据
const currentPage = ref(1)
const pageSize = ref(20)
const totalCount = ref(500)

// 表单验证规则
const rules = {
  deviceId: [{ required: true, message: '请选择设备', trigger: 'blur' }],
  maintenanceType: [{ required: true, message: '请选择维护类型', trigger: 'change' }],
  maintenanceTime: [{ required: true, message: '请选择时间', trigger: 'change' }],
  description: [{ required: true, message: '请输入维护描述', trigger: 'blur' }],
  action: [{ required: true, message: '请输入维护措施', trigger: 'blur' }],
}
// 维护类型列表
const maintenanceTypes = [
  { label: '日常巡检', value: 'routine' },
  { label: '故障维修', value: 'fault' },
  { label: '预防性维护', value: '1' },
]

const props = defineProps({
  MaintenanceClickData: {
    type: Object,
    default: () => ({}),
  },
})

const openDialog = () => {
  weihuVisible.value = true
}

onMounted(() => {
  formData.deviceId = props.MaintenanceClickData.name
})

// 设备列表
const deviceList = ref([]) // 从接口获取设备列表数据
// 创建一个 ref 来引用表单元素
const maintenanceForm = ref(null)

// 计算属性，判断是否显示故障字段
const showFaultFields = computed(() => {
  return formData.value.maintenanceType === 'fault'
})

const submitForm = () => {
  maintenanceForm.value.validate((valid) => {
    if (valid) {
      // 提交表单逻辑
      console.log('提交数据:', formData.value)
    }
  })
}
const resetForm = () => {
  maintenanceForm.value.resetFields()
}

// 重置表单逻辑
const reset = () => {
  resetForm()
}
// 处理文件上传成功事件
const handleUploadSuccess = (response) => {
  formData.value.photos.push(response.url)
}
</script>


<style lang="scss" scoped>
.maintenance-form {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}
.el-divider__text {
  font-size: 16px;
  color: #409eff;
}

.maintenance-content {
  padding: 30px;
  &-search {
    // background: red;
    margin: 20px;
  }
}
</style>
